import React, { Component } from 'react';
import { shoplist_list,shopcart_add,shopcart_clear,shopcart_sub } from "../../api/cart";
import { NavBar, Checkbox, Stepper,Button } from 'antd-mobile'
import '../../styles/shopcart.scss'
class Shopcart extends Component {
    constructor(props) {
        super(props)
        this.state = {
            cartlist: [],
            isAllCheck: false,
            totalPrice: 0,
            totalNum:0
        
           
        }
    }
    getToTal() {
        let newlist= this.state.cartlist.filter(item => {
            return item.ischeck == true 
        })
        let total = 0;
        let num = 0;
        newlist.map((item)=>{
          total += item.salesPrice.value * item.count
          num += item.count
        })
        this.setState({
          totalPrice:total,
          totalNum:num
        })
      }
    
      UNSAFE_componentWillMount(){
        this.getToTal()
      }
    async componentDidMount() {
        var res = await shoplist_list({ userid: localStorage.getItem("userid") })
        console.log(res.data.list)
        this.setState({ cartlist: res.data.list,})
        this.getToTal()
    }
    
    jump() {
        this.props.history.push('/index')
    }
      


    handleChange(id) {
        shopcart_add({ userid: localStorage.getItem('userid'), goodid: id }).then((res) => {
            console.log(res)
            this.getToTal()
           
        })
        shoplist_list({ userid: localStorage.getItem("userid") }).then((res) => {
            this.setState({ cartlist: res.data.list })
            
        })
        
    }
    handleChange2(id) {
        shopcart_sub({ userid: localStorage.getItem('userid'), goodid: id }).then((res) => {
            console.log(res)
            this.getToTal()
          
        })
        shoplist_list({ userid: localStorage.getItem("userid") }).then((res) => {
            this.setState({ cartlist: res.data.list, })
            
        })
        
    }
    mycheck(id) {
        this.state.cartlist.forEach(item => {
            if (item.id == id) {
                item.ischeck = !item.ischeck
                this.setState({
                    isAllCheck: this.state.cartlist.every(item => item.ischeck),
                    
                })

         }
        })
        this.getToTal()

        
    }
    allChange(){
        this.setState({
            isAllCheck:!this.state.isAllCheck
        })
        this.state.cartlist.forEach(item => {
            item.ischeck=!this.state.isAllCheck
        })
        this.getToTal()
    }
  
    mychange() {
        shopcart_clear({ userid: localStorage.getItem('userid') }).then((res) => {
          console.log(res)
        })
        this.props.history.push('/index')
  }
        
    render() {
        return (
            <div className='shopcart'>
                <NavBar >购物车({this.state.cartlist.length})</NavBar>
                {
                    this.state.cartlist.length ==0?
                        <div className='nothing'>
                            <img src="https://img1.baidu.com/it/u=2908198670,1691964833&fm=253&fmt=auto&app=138&f=JPEG?w=679&h=500" alt="" />
                            <p>购物车空空如也,快去加购吧</p>
                            <button onClick={() => { this.jump() }}>去逛逛</button>
                        </div> :
                        <div className='cart-main'>
                            <div className='cart-header'>

                            </div>
                            {
                                this.state.cartlist.map((item, index) => {
                                    return (
                                        <div className='cart-list' key={index}>
                                            <Checkbox checked={item.ischeck}  onChange={(id)=>{this.mycheck(item.id)}} />
                                            <img src={item.pic} alt="" />
                                            <div className='cart-main'>
                                                <p className='text1'>{item.brand + item.brandEN + item.name}</p>
                                                <span className='span1'>包邮包税</span>
                                                <span className='span2'>满￥200/800,享超值换购</span>
                                                
                                                <span className='span3'>3天后恢复原价</span>
                                                <div className='cart-box'>
                                                <p className='price'>￥{parseInt(item.salesPrice.value)}</p>
                                                    <div className='ipt-box'>
                                                        <button     onClick={() => {
                                                        this.handleChange2(item.id)
                                                    }}>-</button>
                                                        <input type="text" value={item.count}  />
                                                        <button onClick={() => {
                                                        this.handleChange(item.id)
                                                    }}>+</button>
                                               </div>
                                             
                                                     </div>
                                                <span className='span4'>限购8件</span>
                                               
                                                
                                            </div>
                                            


                                        </div>
                                    )
                                })
                            }


                        </div>
                }
                    <div className='cart-footer'>
                    <Checkbox checked={this.state.isAllCheck} onChange={()=>{this.allChange()}}>全选</Checkbox>
                    <div>
                        <p>总价:￥<span>{this.state.totalPrice }</span></p>
                    <Button color='danger' shape='rounded' size='small' onClick={()=>{this.mychange()}}>
                            去结算({this.state.totalNum})
                            
                   </Button>
                    </div>
                                               
                                            </div>
            </div>
        );
    }
}

export default Shopcart;